<template>
  <van-image src="https://zpa-picgo.oss-cn-hangzhou.aliyuncs.com/img/20240615101740.png"></van-image>
  <van-tabs v-model:active="courseName" @click-tab="onClickTab" sticky >
  <van-tab title="精选" name="" >精选</van-tab>
  <van-tab title="建筑快题" name="1">建筑快题</van-tab>
  <van-tab title="建筑历史" name="2" >建筑历史</van-tab>
  <van-tab title="建筑艺术" name="3">建筑艺术</van-tab>
  </van-tabs>




  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <van-cell-group>
      <div v-for="course in courses" :key="course.id">


        <van-card
            :origin-price="course.price"
            :price="course.discountPrice"
            :desc="'教师简介: '+course.teacher.profileText"
            :title="course.title"
            :thumb="course.teacher.imageUrl"
        >
          <template #tags>
            <van-tag plain type="primary">{{ course.teacher.name }}</van-tag>
            <van-tag  type="primary">标签</van-tag>
          </template>
          <template #footer>

            <van-button type="primary" @click="pushRoute(course)">购买课程</van-button>
          </template>
        </van-card>


      </div>
    </van-cell-group>
  </van-list>

</template>

<script setup>

import { ref, watch } from 'vue';
import {post} from "../util/request.js";
import {useRouter} from "vue-router";
import {useStore} from "../pinia/index.js";
const courseName = ref('5')
const courseVo = ref({courseType:'',courseSubtype:''})


const props = defineProps({
  // courses: Array,
  courseType: String,
});
const router = useRouter();
const store = useStore();
const loading = ref(false);
const finished = ref(false);
const courses = ref([])

const pushRoute = (course)=>{
  var routePath=''
  console.log(courseVo.value.courseType)
  switch (courseVo.value.courseType) {
    case '1':
      routePath='/OnlineCourse';break;
    case '2':
      routePath='/OfflineCourse';break;
    case '3':
      routePath='/openCourse';break;
    default:break;
  }
  console.log(routePath)
  // router.push(routePath);
 console.log(course)
  store.setCurrentCourse(course)
console.log(store.currentCourse)
  router.push(routePath)

}
const onClickTab = ()=>{

  console.log(courseName.value);
  console.log(props.courseType);
  console.log("onClickTab")
  courseVo.value.courseType=props.courseType
  courseVo.value.courseSubtype=courseName.value
  console.log(courseVo.value)
  getData();
}

const getData = () => {
  console.log(courseVo.value);
  //开通 VIP Axios 请求 接口
  post("course/getCourseList",courseVo.value).then(r=>{
    if(r.code==0){
      //成功
      courses.value=r.data
    }
  })

}

const onLoad = () => {
  // 模拟请求更多数据

  getData()
  setTimeout(() => {
    finished.value = true;
    loading.value = false;
  }, 1000);
};
</script>

<style>
.course-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.hot .van-cell__title {
  color: red;
}

.new .van-cell__title {
  color: green;
}
</style>
